<template>
  <!-- <div class="application-page"> -->
  <ElContainer class="application-page">
    <ElHeader height="64px">
      <ElButton @click="switching()">折叠左侧栏</ElButton>
      <HeadLine></HeadLine>
    </ElHeader>
    <ElContainer class="inner-container">
      <ElAside :class="{ 'el-aside--c': flag, 'el-aside--x': !flag }">
        <ElMenu router :collapse="flag">
          <ElSubMenu index="1">
            <template #title
              ><el-icon><User /></el-icon> <span class="submenu-word">物资管理</span>
            </template>
            <ElMenuItem index="/material"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">物品管理</span></ElMenuItem
            >
            <ElMenuItem index="/transport"
              ><el-icon><House /></el-icon><span class="menuitem-word">运单管理</span></ElMenuItem
            >
            <ElMenuItem index="/purchaseapplier"
              ><el-icon><House /></el-icon><span class="menuitem-word">制作采购单</span></ElMenuItem
            >
            <ElMenuItem index="/purchaseauditor"
              ><el-icon><House /></el-icon><span class="menuitem-word">审核采购单</span></ElMenuItem
            >
          </ElSubMenu>
          <ElSubMenu index="2">
            <template #title
              ><el-icon><User /></el-icon> <span class="submenu-word">人事管理</span>
            </template>
            <ElMenuItem index="/leaveApply"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">请假申请</span></ElMenuItem
            >
            <ElMenuItem index="/leaveAudit"
              ><el-icon><House /></el-icon><span class="menuitem-word">请假审核</span></ElMenuItem
            >
          </ElSubMenu>
          <ElSubMenu index="3">
            <template #title
              ><el-icon><User /></el-icon> <span class="submenu-word">财务管理</span>
            </template>
            <ElMenuItem index="/subexponse"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">报销管理</span></ElMenuItem
            >
            <ElMenuItem index="/subexponseaudit"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">报销审核</span></ElMenuItem
            >
          </ElSubMenu>
          <ElSubMenu index="50">
            <template #title
              ><el-icon><User /></el-icon> <span class="submenu-word">练习场</span>
            </template>
            <ElMenuItem index="/practiseone"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">练习1</span></ElMenuItem
            >
            <ElMenuItem index="/practisetwo"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">练习2</span></ElMenuItem
            >
            <ElMenuItem index="/practisethree"
              ><el-icon><Crop /></el-icon><span class="menuitem-word">练习3</span></ElMenuItem
            >
            <ElMenuItem index=""
              ><el-icon><Crop /></el-icon><span class="menuitem-word">报销管理</span></ElMenuItem
            >
          </ElSubMenu>
          <ElSubMenu index="10">
            <template #title
              ><el-icon><Folder /></el-icon><span class="submenu-word">关于</span></template
            >
            <ElMenuItem index="/xxx"
              ><el-icon><Tools /></el-icon><span class="menuitem-word">版本信息</span></ElMenuItem
            >
            <ElMenuItem index="/yyy"
              ><el-icon><Lock /></el-icon><span class="menuitem-word">联系方式</span></ElMenuItem
            >
          </ElSubMenu>
        </ElMenu>
      </ElAside>
      <ElMain>
        <RouterView>
          <template #default="{ Component }">
            <Transition name="xyz" mode="out-in">
              <KeepAlive> <component :is="Component"></component></KeepAlive>
            </Transition>
          </template>
        </RouterView>
        <!-- <RouterView></RouterView> -->
      </ElMain>
    </ElContainer>
  </ElContainer>
  <!-- </div> -->
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export default {
  name: 'ApplicationPage',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      flag: false
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    switching() {
      this.flag = !this.flag
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.application-page {
  background-color: #712cf9;
}
.inner-container {
  overflow: auto;
}
.el-header {
  /* background-color: bisque; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-aside {
  transition: width 0.55s ease-in-out;
}

.el-aside--c {
  width: 64px !important;
}
.el-aside--x {
  width: 240px !important;
}
.el-main {
  background-color: #fff;
}
.el-menu {
  height: 100%;
  border-right: none;
  --el-menu-text-color: rgba(255, 255, 255, 0.85);
  --el-menu-hover-text-color: rgba(255, 255, 255, 0.85);
  --el-menu-bg-color: #712cf9;
  /* --el-menu-bg-color: #000; */
  --el-menu-hover-bg-color: #712c55;
  --el-menu-active-color: #ffd04b;
  --el-menu-level: 0;
}
.submenu-word {
  font-size: 18px;
  font-weight: 560;
}
.menuitem-word {
  font-size: 16px;
  font-weight: 440;
}
.xyz-enter-active {
  animation: xyzframe 0.85s ease-in-out;
}
.xyz-leave-active {
  animation: xyzframe 0.85s ease-in-out reverse;
}
@keyframes xyzframe {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    scale: 1;
    opacity: 100%;
  }
}
</style>
